import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import '../routes.dart';
import 'action.dart';
import 'state.dart';

final _defaultColor = Color.fromRGBO(102, 102, 96, 1);
final _activeColor = Color.fromRGBO(255, 37, 38, 1);

final PageController _controller = PageController(
  initialPage: 0,
);

Widget buildView(BottomTabbarState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    body: PageView(
      controller: _controller,
      children: <Widget>[
        routes.buildPage('home_page', null),
        routes.buildPage('brand_page', null),
        routes.buildPage('task_page', null),
        routes.buildPage('find_page', null),
        routes.buildPage('user_page', null),
      ],
      physics: NeverScrollableScrollPhysics(),
    ),
    bottomNavigationBar: BottomNavigationBar(
        currentIndex: state.currentIndex,
        onTap: (index) {
          _controller.jumpToPage(index);
          dispatch(BottomTabbarActionCreator.upCurrentIndex(index));
        },
        type: BottomNavigationBarType.fixed,
        items: [
          _bottomItem(state, '首页', 'assets/images/tab_icon_slices/tabbar_buttom_sun.png','assets/images/tab_icon_slices/tabbar_buttom_s.png' ,0),
          _bottomItem(state, '品牌', 'assets/images/tab_icon_slices/tabbar_buttom_pun.png','assets/images/tab_icon_slices/tabbar_buttom_p.png', 1),
          _bottomItem(state, '任务', 'assets/images/tab_icon_slices/tabbar_buttom_run.png','assets/images/tab_icon_slices/tabbar_buttom_r.png', 2),
          _bottomItem(state, '发现',  'assets/images/tab_icon_slices/tabbar_buttom_fun.png','assets/images/tab_icon_slices/tabbar_buttom_f.png', 3),
          _bottomItem(state, '个人中心',  'assets/images/tab_icon_slices/tabbar_buttom_mun.png','assets/images/tab_icon_slices/tabbar_buttom_m.png', 4),
        ]),
  );
}

_bottomItem(BottomTabbarState state, String title, String img1, String img2,int index) {
  return BottomNavigationBarItem(
      icon: Image.asset(
        img1,
        width: 24,
        height: 24,
      ),
      // Icon(
      //   icon,
      //   color: _defaultColor,
      // ),
      activeIcon: Image.asset(
        img2,
        width: 24,
        height: 24,
      ),
      // Icon(
      //   icon,
      //   color: _activeColor,
      // ),
      title: Text(
        title,
        style: TextStyle(
            color: state.currentIndex!= index ? _defaultColor : _activeColor),
      ));
}

